<template>
  <Modal v-model="isOpen" class="card-detail">
    <template #header>
      <div class="card-header">
        <h2>{{ card.title }}</h2>
        <div class="card-labels">
          <span 
            v-for="label in card.labels" 
            :key="label"
            class="label"
            :style="{ backgroundColor: label }"
          />
        </div>
      </div>
    </template>

    <div class="card-content">
      <div class="description">
        <h3>描述</h3>
        <textarea
          v-model="description"
          placeholder="添加描述..."
          @blur="updateDescription"
        />
      </div>

      <div class="attachments" v-if="card.attachments?.length">
        <h3>附件</h3>
        <div class="attachment-list">
          <div 
            v-for="attachment in card.attachments"
            :key="attachment._id"
            class="attachment-item"
          >
            <img 
              v-if="isImage(attachment.filename)"
              :src="attachment.url"
              :alt="attachment.filename"
            />
            <div class="attachment-info">
              <span>{{ attachment.filename }}</span>
              <button @click="downloadAttachment(attachment)">下载</button>
            </div>
          </div>
        </div>
      </div>

      <div class="due-date" v-if="card.dueDate">
        <h3>截止日期</h3>
        <DatePicker v-model="dueDate" @update:modelValue="updateDueDate" />
      </div>
    </div>
  </Modal>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';
import Modal from '../Common/Modal.vue';
import DatePicker from '../Common/DatePicker.vue';
import { useCardStore } from '../../stores/card';

const props = defineProps({
  card: {
    type: Object,
    required: true
  },
  isOpen: {
    type: Boolean,
    required: true
  }
});

const emit = defineEmits(['update:isOpen']);

const cardStore = useCardStore();
const description = ref(props.card.description);
const dueDate = ref(props.card.dueDate);

const updateDescription = async () => {
  await cardStore.updateCard({
    id: props.card._id,
    description: description.value
  });
};

const updateDueDate = async () => {
  await cardStore.updateCard({
    id: props.card._id,
    dueDate: dueDate.value
  });
};

const isImage = (filename) => {
  return /\.(jpg|jpeg|png|gif)$/i.test(filename);
};

const downloadAttachment = (attachment) => {
  window.open(attachment.url, '_blank');
};
</script>

<style scoped>
.card-detail {
  width: 768px;
  max-width: 90vw;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.card-labels {
  display: flex;
  gap: 4px;
}

.label {
  width: 32px;
  height: 8px;
  border-radius: 4px;
}

.card-content {
  padding: 16px;
}

.description textarea {
  width: 100%;
  min-height: 100px;
  padding: 8px;
  margin-top: 8px;
  border: 1px solid #DFE1E6;
  border-radius: 3px;
  resize: vertical;
}

.attachment-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 8px;
}

.attachment-item {
  border: 1px solid #DFE1E6;
  border-radius: 3px;
  padding: 8px;
}

.attachment-item img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 3px;
}

.attachment-info {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style> 